// Accordion 手风琴

// 默认
.accordion {
    .card {
        margin: 0;
        box-shadow: none;
        .card-header {
            cursor: pointer;
            margin: 0;
            padding: 0;
            border-bottom: 0;

            .card-title {
                margin: 0;
                font-size: 1.1rem;
                font-weight: 500;
                padding: 1rem 1rem;
                color: e-state-color(brand, base);
                display: flex;
                justify-content: flex-start;
                align-items: center;

                > i {
                    margin-right: 1rem;
                    font-size: 1.4rem;
                    color: e-state-color(brand, base);
                }

                &.collapsed {
                    color: e-base-color(label, 3);

                    > i {
                        color: e-base-color(label, 2);
                    }
                }

                &:after {
                    right: 1rem;
                }
            }
        }

        .card-body {
            padding: 1.25rem;
            font-size: 1rem;
        }
    }
}

// 浅色
.accordion.accordion-light {
    .card {
        border: 0;
        border-top: 1px solid #eeeef4;
        margin: 0;

        .card-header {
            cursor: pointer;
            padding: 0;
            margin: 0;
            background-color: transparent;
            border: 0;

            .card-title {
                margin: 0;
                font-size: 1.1rem;
                padding: 1rem 1rem 1rem 0;
                font-weight: 500;
                color: e-state-color(brand, base);

                &.collapsed {
                    color: e-base-color(label, 2);

                    &:after {
                        color: e-base-color(label, 2);
                    }
                }

                &:after {
                    right: 0;
                }
            }
        }

        .card-body {
            padding: 0;
            margin-bottom: 1.25rem;
            font-size: 1rem;
        }

        // 第一个item不显示顶部边框
        &:first-child {
            border-top: 0;

            .card-header {
                margin: 0;
            }
        }

        &:last-child {
            margin-bottom: 1.25rem;;

            .card-body {
                padding: 0;
                margin: 0;
            }
        }
    }
}

// 带背景色
.accordion.accordion-solid {
    .user-pic {
        margin-bottom: 1.5rem;
        border: 0;

        &:last-child {
            margin-bottom: 0;
        }

        .card-header {
            padding: 0;
            background-color: transparent;

            .card-title {
                font-size: 1.1rem;
                padding: 1.25rem;
                background-color: e-base-color(grey, 1);

                @include e-rounded {
                    border-radius: $e-border-radius;
                }

                &.collapsed {
                    @include e-rounded {
                        border-bottom-left-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }
            }

        }

        .card-body {
            border: 1px solid e-base-color(grey, 1);

            @include e-rounded {
                border-bottom-left-radius: $e-border-radius;
                border-bottom-right-radius: $e-border-radius;
            }
        }
    }
}

// 使用箭头图标
.accordion.accordion-toggle-arrow {
    .user-pic {
        .card-header {
            .card-title {
                color: e-state-color(brand, base);
                position: relative;

                &:after {
                    position: absolute;
                    font-size: 1rem;
                    @include e-la-icon-self(e-get($e-action-icons, down));
                    color: e-state-color(brand, base);
                }

                &.collapsed {
                    color: e-base-color(label, 2);

                    &:after {
                        color: e-base-color(label, 2);
                        content: '#{e-get($e-action-icons, right)}';
                    }
                }
            }
        }
    }
}

// 使用 + - 图标
.accordion.accordion-toggle-plus {
    .user-pic {
        .card-header {
            .card-title {
                color: e-brand-color();
                position: relative;

                &:after {
                    position: absolute;
                    @include e-la-icon-self(e-get($e-action-icons, minus));
                    font-size: 1.2rem;
                    color: e-brand-color();
                }

                &.collapsed {
                    color: e-base-color(label, 2);

                    &:after {
                        color: e-base-color(label, 2);
                        content: '#{e-get($e-action-icons, plus)}';
                    }
                }
            }
        }
    }
}